<template>
 <div>
  <div>
  <p>{{msg}}</p>
  <!-- input为单标签,不能插入差值表达式,所以用span包裹
       用v-for循环遍历数组 -->
  <span v-for="(item,index) in arr" :key="index">
    <input type="checkbox" v-model="hobby" :value="item">{{item}}
  </span>
 </div>


 <div>
  <ul>
    <li v-for="(item,index) in hobby" :key="index">{{item}}</li>
  </ul>
 </div>

 </div>

</template>
<script>
export default {
 data() {
 return {
  msg:"请选择你喜欢的专栏",
  arr:["科幻","喜剧","动漫","冒险","军事","娱乐","奇闻"],
  hobby:[]
 }
 },
 methods:{
 },
}
</script>
<style lang="less" scoped>

</style>
